<template>
    <div id="jishuInfo" class="jishuInfo">
        <div class="container"> <!-- Container -->
            <div class="section-title text-center center">
                <h2>个人 <strong> 资能</strong></h2>
                <hr>
                <div class="clearfix"></div>
                <p>人送外号“全干工程师”。在比一比公司出差拜访客户达27次，熟练掌握与客户的售前沟通技巧，具备需求引导能力。</p>
            </div>
            <div class="row">
                <Carousel type="card" arrow="always" height="410px">
                    <CarouselItem v-for="item in jishuData" :key="item.key">
                        <h4 class="medium">{{ item.key }}</h4>
                        <span class="tagBox" v-for="tag in item.keyData" :key="tag">
                            <Tag class="tagText" type="warning">{{tag}}</Tag>
                        </span>
                    </CarouselItem>
                </Carousel>
            </div>
        </div>
    </div>
</template>

<script>
    import {Carousel, CarouselItem, Tag} from 'element-ui';
    import {getJishuData} from "../../api/jishuApi";

    export default {
        name: "jishuInfo",
        components: {
            Carousel, CarouselItem, Tag
        },
        data() {
            return {
                jishuData: []
            }
        },
        mounted() {
            this.initData();
        },
        methods: {
            initData() {
                this.jishuData = getJishuData();
            }
        }
    }
</script>

<style lang="less" scoped>
    .jishuInfo {
        padding: 80px 0;
        background: linear-gradient(to bottom, #ffffff 0%, #47729e 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#47729e', GradientType=0);

        h4 {
            color: #d42c1a;
            font-size: 25px;
            opacity: 0.75;
            line-height: 40px;
            margin: 0 0 10px 0;
            text-align: center;
        }

        .tagBox {
            margin: 5px;
            display: inline-block;
        }

        .tagText{
            font-size: 18px;
            color: #122b40;
        }
    }
</style>
<style lang="less">
    .el-carousel__item {
        padding: 10px 15px;
        width: 70%;
        &:nth-child(2n) {
            background-color: #99a9bf;
        }

        &:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    }
</style>